// ModalComponent.tsx
import React, { useState } from 'react';
import { Modal, Form, Input, Radio } from 'antd';
import { Column } from '../types';

// export type IColumnType = "CUSTOMIZE" | "REMARK" | "USER_FILL";
// interface FormInfo {
//   id?: string;
//   type: IColumnType;
//   title?: string | null;
// }

interface ModalProps {
  column: Column | null;
  onCancel: () => void;
  onConfirm: (data: Column | null) => void;
}

const ModalComponent: React.FC<ModalProps> = ({ column, onCancel, onConfirm }) => {
  const [form] = Form.useForm();
  const [userInfo, setUserInfo] = useState(
    column && column['type'] !== 'FIXED' 
      ? column
      : { ...column, type : 'CUSTOMIZE'}
  );

  const handleOk = () => {
    form.validateFields().then((values) => {
      // api service
      setUserInfo(values);
      onConfirm({
        "id": Math.floor(Math.random()*(100+1)),
        "parentId": Math.floor(Math.random()*(100+1)),
        ...column,
        ...values
      });
    }).catch(info => {
      console.log('Validate Failed:', info);
    });
  };

  return (
    <Modal
      title={userInfo.id ? '编辑' : '新建'}
      open={true}
      onCancel={onCancel}
      onOk={handleOk}
    >
      <Form form={form} initialValues={userInfo}>
        <Form.Item label="类型" name="type" rules={[{ required: true, message: '请选择类型！' }]}>
          <Radio.Group>
            <Radio value="CUSTOMIZE">自定义逻辑</Radio>
            <Radio value="REMARK">备注列</Radio>
            <Radio value="USER_FILL">用户手填列</Radio>
          </Radio.Group>
        </Form.Item>
        <Form.Item label="名称" name="title" rules={[{ required: true, message: '请输入名称！' }]}>
          <Input />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default ModalComponent;